<template>
    <div class="orderListRuleForm">
        <panle title='拼团订单列表' content="拼团订单列表"></panle>

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">

          <el-form-item label="下单时间" prop="createtime">
            <el-date-picker
                v-model="form.create_time"
                type="daterange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="订单号" prop="order_no">
            <el-input size="mini" placeholder="请输入订单号" v-model="form.order_no"></el-input>
          </el-form-item>
          <el-form-item label="拼团号" prop="group_no">
            <el-input size="mini" placeholder="请输入拼团号" v-model="form.group_no"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="state">
            <el-select v-model="form.state" placeholder="请选择" size="mini">
              <el-option label="待支付" value="1"></el-option>
              <el-option label="待发货" value="2"></el-option>
              <el-option label="待收货" value="3"></el-option>
<!--              <el-option label="售后订单" value="4"></el-option>-->
              <el-option label="已完成" value="5"></el-option>
              <el-option label="已取消" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="佣金状态" prop="settle">
            <el-select v-model="form.settle" placeholder="请选择" size="mini">
              <el-option label="未结算" value="1"></el-option>
              <el-option label="已结算" value="0"></el-option>

            </el-select>
          </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <vue-json-excel
                    style="display: inline;margin-left: 10px;"
                    :data="tableData"
                    :fields="excelFields"
                    name="导出拼团订单.xlsx"
                    type="xlsx">
                    <el-button size="mini">导出</el-button>
                </vue-json-excel>
                
            </el-form-item>
        </el-form>

        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      stripe default-expand-all>
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="group_no" label="拼团号"></el-table-column>
              <el-table-column prop="order_no" label="订单号"></el-table-column>
              <el-table-column prop="title" label="商品名称"></el-table-column>
              <el-table-column prop="image" label="商品主图">
                <template slot-scope="scope">
                  <el-image :src="scope.row.image" fit="fill" style="width: 60px;height: 60px;"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="nickname" label="客户昵称"></el-table-column>
              <el-table-column prop="phone" label="客户手机号"></el-table-column>
              <el-table-column prop="popu_name" label="所属推广员"></el-table-column>
              <el-table-column prop="number" label="售出数量"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
<!--              <el-table-column prop="people_num" label="成团人数"></el-table-column>-->
              <el-table-column prop="createtime" label="下单时间"></el-table-column>
<!--              <el-table-column prop="day_time" label="退单时间"></el-table-column>-->
              <el-table-column prop="status" label="订单状态"></el-table-column>
              <el-table-column prop="actual_payment" label="支付金额"></el-table-column>
              <el-table-column prop="pay_time" label="支付时间"></el-table-column>
              <el-table-column prop="earnings_one" label="二级佣金"></el-table-column>
              <el-table-column prop="earnings_two" label="一级佣金"></el-table-column>
              <el-table-column prop="type" label="佣金状态"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="form.total"></el-pagination>
            </div>
        </div>


    </div>

</template>

<script>
import {
    getCustomerLossData,
    getStaffData,
    sendStaff
} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getGroupsOrderList} from "@/api/sell/order/order";

export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            open: false,
            tableData: [],
            loading: false,
            number:0,
            status: 0,
            form: {
              createtime: '',
              order_no: '',
               group_no:'',
                 state: '',
                 settle: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,

            },
            optionsVa: [],
            value1: [],

            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
              "拼团号 ": "group_no",
              "订单号 ": "order_no",
              "商品名称": "title",
              "商品主图": "image",
              "客户昵称": "nickname",
              "客户手机号": "phone",
              "所属推广员": "popu_name",
              "售出数量": "number",
              "价格": "price",
              "下单时间": "createtime",
              "退单时间": "agreetime",
              "订单状态": "status",
              "支付金额": "actual_payment",
              "支付时间": "pay_time",
              "一级佣金": "earnings_two",
              "二级级佣金": "earnings_one",
              "佣金状态": "type",

            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
          getGroupsOrderList(this.form).then((res) => {
                this.tableData = res.data.list;
                this.form.total = res.data.total;
                this.loading = false;
            })
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.group_no = ''
            this.form.createtime = ''
            this.form.order_no = ''
            this.form.state = ''
            this.form.settle = ''
            this.init();
        },
        openSaff: async function() {
            
            const res = await getStaffData();
            this.optionsVa = res.data;
            const des = await getCustomerLossData();
            this.resForm.value1 = des.data.send_name;
            this.resForm.status = des.data.status;
            // this.resForm = {
            //     "status": 0,
            //     "value1": [],
            // };
            this.open = true;
            
        },
        submitForm:function(data){
            
            this.$refs[data].validate((valid) => {
                if (valid) {
                    sendStaff(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.open=false;
                            this.init();

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
      
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>